<template>
  <layoutBlock >
    <div class="content">
      <div class="">
        <Select filterable v-model="condition.deviceModelCode" clearable placeholder="请选择设备型号" @on-change="searchData">
          <Option v-for="item in modeList" :value="item.code" :key="item.id">{{ item.name }}</Option>
        </Select>
        <Select filterable v-model="condition.deviceStatus" clearable placeholder="请选择设备状态" @on-change="searchData">
          <Option v-for="item in deviceStatus" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
        <Input class="mb10" search v-model="condition.keyword" placeholder="请输入设备编码" @on-search="searchData" />
<!--        <Button class=" fr" type="error" @click="delAll">删除</Button>-->
        <a class="fr link-button" href="http://yfzx.whty.com.cn/tx_esim/" target="_blank" v-if="_.get(info,'orgType')=='ROOT'">SIM卡平台</a>
      </div>
      <Table @on-selection-change="selectList" border class="mt20" ref="selection" :columns="columns2" :data="data1">
        <template slot="name" slot-scope="{ row, index }">
          <span>护栏警示标</span>
        </template>
        <template slot="status" slot-scope="{ row, index }">
          <Tag :color="getStutas(row).color" > {{getStutas(row).name}} </Tag>
        </template>
        <template slot="alarmHandledStatus" slot-scope="{ row, index }">

        <Tag color="#f50" v-if="row.normalStatus == '00'"> 未处理 </Tag>
        <Tag color="#008aff" v-else-if="row.normalStatus =='11'"> 已处理 </Tag>
        <Tag color="#aaa" v-else> 无 </Tag>
        </template>
        <template slot-scope="{ row, index }" slot="action" >
          <a @click="showDrawer(row.id)">详情 </a>
<!--          <span class="cursor cr2d8cf0" @click="getDel(row,1)">删除</span>-->
        </template>
      </Table>
      <div class="disflex mt30">
        <Page :total="total" v-if="total>condition.limit"  :current="condition.start" show-elevator @on-change="changepage"></Page>
      </div>
      <Modal
          v-model="isShow2"
          title="删除"
          @on-ok="getDel('',2)"
          @on-cancel="cancel" width="350">
        <div class="input-item">
          该设备将被删除, 是否继续?
        </div>
      </Modal>
      <Drawer
          :width="360"
          title="设备详情"
          placement="right"
          :closable="false"
          v-model="drawerVisible"
          @close="onClose"
      >
        <div class="autoMap-box">
          <autoMap :mapInfo="mapInfo" :pointData="pointData"></autoMap>
        </div>
        <ul class="device-info">
          <li>
            <label>设备编码</label>
            <span>{{_.get(pointData,'0.code')}}</span>
          </li>
          <li>
            <label>护栏名称</label>
            <span>{{_.get(pointData,'0.railName')}}</span>
          </li>
          <li >
            <label>当前状态</label>
            <span class="color-status"><Tag :color="status.color" > {{status.name}} </Tag></span>
          </li>
          <li>
            <label>所属项目</label>
            <span>{{_.get(pointData,'0.projectName')}}</span>
          </li>
          <li>
            <label>更新时间</label>
            <span>{{_.get(pointData,'0.dataUpdatedAt')}}</span>
          </li>
          <li>
            <label>安装人员</label>
            <span>{{_.get(pointData,'0.installUserName')}}</span>
          </li>
        </ul>
      </Drawer>
    </div>
  </layoutBlock>
</template>
<script>
import {deviceType,deviceList,deviceDel,deviceDetail} from '@/api/device';
import {regionTree,orgTree} from '@/api/base'
import tool from "../../libs/tool";
import base from '@/mixins/base';
import autoMap from "../../components/Map/autoMap";
import {mapState} from "vuex";
export default {
  mixins: [base],
  components:{autoMap},
   computed:{
    ...mapState('admin/user', [
      'info',
    ]),
  },
  data () {
    return {
      mapInfo:[],
      pointData:[],
      total:0,//总条数
      roleId:'',
      editorData:{},
      title:'编辑',
      statusList:[],
      condition:{//头部筛选传参
        keyword:'',
        limit:10,
        start:1,
        deviceModelCode:'',
        // deviceStatus:'',
      },
      columns2: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '设备名称',
          slot: 'name',
          ellipsis:true
        },
        {
          title: '设备型号',
          key: 'deviceModelCode',
          ellipsis:true
        },
        {
          title: '设备编码',
          key: 'code',
          ellipsis:true
        },
        {
          title: 'SIM卡号',
          key: 'imsi',
          ellipsis: true,
          width:200,
        },
        // {
        //   title: '类型',
        //   key: 'code',
        // },
        // {
        //   title: '运营商所属用户',
        //   key: 'code',
        // },
        // {
        //   title: '所属单位',
        //   key: 'orgName',
        //   ellipsis:true
        // },
        // {
        //   title: '归属项目',
        //   key: 'projectName',
        //   ellipsis:true
        // },
        {
          title: '当前位置',
          key: 'address',
          ellipsis:true
        },
        {
          title: '设备状态',
          slot: 'status'
        },
        {
          title: 'SIM状态',
          key: 'imsiStatus'
        },
        {
          title: '到期时间',
          key: 'imsiOverTime'
        },
        // {
        //   title: '当前告警',
        //   slot: 'alarmHandledStatus',
        //   ellipsis:true
        // },
      {
        title: '最后上线',
        key: 'dataUpdatedAt',
        align: 'center',
        render: (h, params) =>{
          return h('span', params.row.dataUpdatedAt||'-');
          }
        },
        {
          title: '操作',
          slot: 'action',
          width:120,
          align: 'center'
        }
      ],
      data1: [],
      isShow:false,
      isShow2:false,
      isShow3:false,
      isShow4:false,
      detail:'',
      ids:'',
      isAdd:true,
      noShow:false,
      userId:'',
      isShowUser:false,
      selectlist:[],
      modeList:[],
      orgList:[],
      drawerVisible:false,

    }
  },
  created(){


    // this.getRegionTree();
    // this.getOrgTree();
  },
  filters:{
    format(arr){//这里不能用类似与formatDepts 驼峰命名 不然模版中使用会编译报错
      let res= (arr||[]).map(item=>{
        return item.name
      })
      return res.join('、')
    },
  },
  mounted() {
    let deviceStatus=this.$route.query.deviceStatus
    if(deviceStatus){
      this.condition.deviceStatus=deviceStatus;
    }
    this.getType();
    this.getData();
  },
  methods: {
    searchData(){
      this.condition.start=1;
      this.getData()
    },
    showDrawer(id) {
      this.drawerVisible = true;
      this.getDeviceDetail(id)
    },
    async getDeviceDetail(id) {
      let res= await deviceDetail({id});
      this.mapInfo=[{
        path:tool.formatpostion(JSON.parse(_.get(res,'data.railPosition')||`{}`))
      }];
      let postion =_.get(res,'data.position').split(',')
      this.pointData=[
        {..._.get(res,'data'),
          gps_lng:_.get(postion,'0'),
          gps_lat:_.get(postion,'1'),
          className:tool.getClassNamme(_.get(res,'data'))
        }
      ]
      console.log(this.pointData,'===this.pointData')

    },
    onClose() {
      this.drawerVisible = false;
    },
    async getOrgTree(){
      let res= await orgTree({});
      this.orgList=tool.formatTree(_.get(res,'data')||[],'children','lable','id',false,false);
    },
    async getRegionTree() {
      let res= await regionTree({});
      this.statusList=tool.formatTree(_.get(res,'data')||[],'children','lable','id',false,false);

    },
    async getType(){
      let res = await deviceType({});
      this.modeList= _.get(res,'data')||[];
    },
    selectList(value){
      this.condition.start=1;
      this.selectlist=value
    },
    delAll(){
      let arr= this.selectlist.map(item=>{
        return item.id
      })
      if(arr.length==0){
        this.$Message.warning('请先选择设备！')
        return
      }
      this.getDel({id:arr.join()},1)
    },
    success(){
      this.getData();
      this.isShow=false;
      this.isShow03=false;
    },
    //获取列表
    async getData(){
      let  res = !this.orgIds?this.defaultListData: await  deviceList({...this.condition ,porgIds:this.orgIds});
      this.data1= _.get(res,'data.records') ||[];
      this.total=_.get(res,'data.total')||0;
    },
    //分页deviceType
    changepage(page){
      this.condition.start = page
      this.getData()
    },
    getEdit(row,type){
      this.isAdd=type;
      this.isShow = true;
      if(type) return;
      let {address,bz,name,id,orgId,regdate} = row;
      let regionCode=[];
      if(row.province) regionCode.push(row.province);
      if(row.city) regionCode.push(row.city);
      if(row.district) regionCode.push(row.district);
      this.editorData={address,bz,name,id,orgId,regdate,regionCode}
    },
    async getDel(row,type){
      if(type==1){
        this.ids = row.id
        this.isShow2 = true;
      }else{
        let res = await deviceDel({projectIds:this.ids});
        if(_.get(res,'code')==0){
          this.isShow2 = false;
          this.$Message.success('删除成功')
          this.getData();
        }else{
          this.$Message.error(_.get(res,'message')||'删除失败！')
        }
      }
    },

    cancel(){},
  }
}
</script>

<style scoped lang="less">
.autoMap-box{
  height: 240px;
}
.device-info{
  margin: 0;
  padding: 0;
  li{
    display: flex;
    justify-content: space-between;
    margin-top:20px;
    align-items: center;
    label{
      font-size: 14px;
      color: #fff;
      width:180px;

    }
    span{
      text-align: right;
      display: block;
      width: calc(~"100%-220px");
      font-size: 12px;
      color: #eee;

    }
    .color-status{
      span{
        color: #fff;
      }
    }
  }
}
.link-button{
  height:30px;
  line-height:30px;
  border:1px solid #008aff;
  padding: 0 10px;
  &:hover{
    background: rgba(0, 138, 255, 0.76);
    color:#fff;
  }
}
</style>
